<template>
  <div>
    <div class="demo-nav">
      <div class="demo-nav__title">个人资料</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div align="left">
      <van-cell>
        <template #title>
          <span class="custom-title" style="height: 3rem;line-height: 3rem">头像</span>
        </template>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-image
            round
            width="3rem"
            height="3rem"
            fit="cover"
            :src="findBy.customerHandImage"
          />
        </template>
      </van-cell>
      <van-cell is-link title="昵称" :value=findBy.customerName />
      <van-action-sheet v-model="show" title="标题">
        <div class="content">内容</div>
      </van-action-sheet>
      <van-cell title="ID" :value=findBy.customerInfId />
      <van-cell is-link title="性别" :value="findBy.gender=='0' ? '男' : '女'" />


      <van-action-sheet v-model="showSex" :actions="actions" @select="onSelect" />
<!--      <van-cell is-link title="位置" value="未选择" @click="showArea = true" />-->
      <van-action-sheet v-model="showArea" title="地址">
        <van-area
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          @cancel="cancelArea"
          @confirm = "confirmArea"
        />
      </van-action-sheet>
<!--      <van-cell is-link title="生日" value="未选择" @click="showBirthday = true" />-->
      <van-action-sheet v-model="showBirthday" title="生日">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="cancelBirthday"
          @confirm = "confirmBirthday"
        />
      </van-action-sheet>
    </div>

    <div>
      <van-button type="info" style="width: 20rem" @click="tiaoxiu">修改信息</van-button>
    </div>

    <van-popup v-model="showform" style="width: 18rem;height: 30rem" @submit="onSubmit">

      <van-form ref="form" :model="form" >

        <van-uploader
          upload-text="用户头像"
          v-model="customerHandImage"
          :deletable="false"
          :max-count="1"
          :after-read="firstRead"
        />

        <van-field
          v-model="form.customerName"
          name="用户名称"
          label="用户名称"
          placeholder="用户名称"
        />

        <van-field
          v-model="form.gender"
          name="性别"
          label="性别"
          placeholder="性别"
        >
          <template #input>
            <van-radio-group v-model="form.gender" direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>


        <div style="margin: 16px;">
          <van-button round block type="info" @click="submitForm">提交</van-button>
        </div>
      </van-form>

    </van-popup>


  </div>
</template>

<script>
  import { moneyuploadVoucher } from "@/api/moneyen";
  import areaList from '@/utils/area';
  import { longfindAllById,longedit } from "@/api/customerinf";
  import {Toast} from "vant";

  export default {
    name: "PersonalData",
    data(){
      return{
        findBy:Array,
        customerHandImage: [],
        form:{
          customerHandImage:'',
        },
        showform:false,
        // 昵称展示层
        show:false,
        // 性别展示层
        showSex:false,
        actions: [{ name: '男' }, { name: '女' }, { name: '保密' }],
        // 地区列表
        areaList,
        // 选择地区展示
        showArea:false,
        // 生日选择展示
        showBirthday:false,
        minDate: new Date(1950, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
      }
    },
    created() {
      this.findListBy();
    },
    methods:{
      findListBy(){
        longfindAllById().then(res=>{
          this.findBy = res.data.data
        })
      },

      firstRead(e) {
        //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
        let fd = new FormData()
        fd.append("file", e.file)
        moneyuploadVoucher(fd).then(res => {
          this.form.customerHandImage = "http://51jhf.com/profile/xiazai"+res.data.tu;
          if (res.data.code == 200) {
            Toast({
              message: "上传成功。",
              position: "top"
            });
          } else {
            // alert('第一期支付凭证上传失败，请重试！')
          }

        });
      },

      submitForm(){
        longedit(this.form).then(res=>{
          Toast.success('修改成功');
          this.showform = false;
        })
      },

      tiaoxiu(){
        this.form="";
        longfindAllById().then(res=>{
          this.form = res.data.data;
        })
        this.showform = true;
      },

      //返回上一层
      toBack(){
        this.$router.go(-1);
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.showSex = false;
        console.log(item.name);
      },
      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },
      // 地址确定事件
      confirmArea(res){
        for (let i = 0; i < res.length; i++){
          this.areaTest += res[i].name;
        }

        this.showArea = false;
      },
      // 生日取消事件
      cancelBirthday(res){
        this.showBirthday = false;
      },
      // 生日确定事件
      confirmBirthday(res){
        console.log(res);
        this.showBirthday = false;
      }
    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .content {
    padding: 16px 16px 160px;
  }
</style>
